<template>
    <div class="son3">
        <transition name="leftimg">
            <img src="../../assets/indexImg/three_human.jpg" v-if="$store.state.pageForPage1==2" class="left-img">
        </transition>
        <div class="right-div">
            <transition name="rightimg1">
                <img class="float" src="../../assets/indexImg/wangyi.jpg" height="285" width="570"
                     v-if="$store.state.pageForPage1==2"
                     @click="$router.push({path:'/detailsForNews',query:{id:69,select:'公司新闻',} })"
                     style="cursor: pointer"
                >
            </transition>
            <transition name="lastin">
                <img class="float" src="../../assets/indexImg/three_more.jpg" v-if="$store.state.pageForPage1==2"
                     height="285" width="570"
                     @click="$router.push('/news')"
                     style="cursor: pointer"
                >
            </transition>
        </div>
        <transition name="lastin">
            <img src="../../assets/indexImg/three_news.png" class="new" v-if="$store.state.pageForPage1==2">
        </transition>
    </div>
</template>

<script>
    export default {
        name: "page3"
    }
</script>

<style scoped>
    .son3 {
        background-color: #2b2b2b;
        height: 100%;
        width: 100%;
        min-width: 1200px;
        position: relative;
    }

    /*//第一个图片相关*/
    .left-img {
        display: block;
        margin-left: 15%;
    }

    .leftimg-leave-to {
        opacity: 0;
    }

    .leftimg-enter {
        opacity: 0;
    }

    .leftimg-enter-active,
    .leftimg-leave-active {
        transition: all 0.3s linear 1s;
    }

    /*/右边的盒子/*/
    .right-div {
        position: absolute;
        top: 10%;
        left: 50%;
    }

    .rightimg1-leave-to {
        opacity: 0;
        transform: translate(80px);
    }

    .rightimg1-enter {
        opacity: 0;
        transform: translate(80px);
    }

    .rightimg1-enter-active,
    .rightimg1-leave-active {
        transition: all 0.8s ease 1s;
    }

    /*//右边两个突变的显现*/
    .float {
        float: left;
        /*cursor: pointer;*/
    }

    /*    new*/
    .new {
        position: absolute;
        top: 65%;
        left: 20%;
    }

    /*    new和最后图片的显现lastin*/
    .lastin-leave-to {
        opacity: 0;
    }

    .lastin-enter {
        opacity: 0;
    }

    .lastin-enter-active,
    .lastin-leave-active {
        transition: all 0.5s linear 1.8s;
    }
</style>